/* 
sass文件的后缀名scss
sass 3.0 sass  scss

scss目前流行 scss

sass基于ruby开发的 不识别中文

D:\a-jinsi-courseware\1.class course\5.W2203A\code\w2203a-3\less sass。。。

*/

/* 
定义变量
$ 定义变量

*/
$zero:0;

/* 
mixin 混合
@mixin 混合名字(){

}
调用 
@include 混合名()


函数

引入其他sass文件 @import
*/
@import './reset.scss';
@mixin center($w:100px,$h:100px,$c:green){
    width: $w;
    height: $h;
    background-color: $c;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

@function test($n){
    @return $n * 10px;
}
.wrap{
   /*  width: 500px;
    height: 500px;
    background-color: red; */
    /* position: absolute;
    left: $zero;
    right: $zero;
    top: $zero;
    bottom: $zero;
    margin: auto; */
    @include center(500px,500px,red);
    .middle{
       @include center(300px,300px ,yellow);
        .inner{
            width: 100px;
            height: 100px;
            background-color: rgb(0, 17, 255);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
}
.wrap1{
    width: 100px;
    height: test(20);
    background-color: red;
}

/* 循环语句*/
/* @for */
@for $i from 1 to 3{
    .box#{$i}{
        height: $i * 10px
    }
}
/* @for循环  from 起始位置 to 结束位置
包含起始位置 不包含结束位置
*/
/* @for循环  from 起始位置 through 结束位置
包含起始位置 包含结束位置
*/
@for $i from 1 through 3{
    .box#{$i}{
        height: $i * 10px
    }
}

/* @while */

$num:10;
@while $num <20 {
    .f-box#{$num}{
        width: #{$num * 10}px;
    }
    $num:$num + 1;
}
/* @each */
$list:5 10 15 20;
@each $item in $list {
    .box-fxx#{$item}{
        font-size:#{$item}px;
    }
}